
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
      padding: 20px;
      min-height: 100vh;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .header {
      background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
      color: white;
      padding: 25px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .header h1 {
      font-size: 32px;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .header p {
      font-size: 18px;
      opacity: 0.9;
    }

    .content {
      display: flex;
      min-height: 600px;
    }

    .left-panel {
      flex: 1;
      background: rgba(255, 255, 255, 0.3);
      padding: 25px;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
    }

    .right-panel {
      flex: 2;
      padding: 25px;
      background: rgba(255, 255, 255, 0.3);
    }

    .search-box {
      margin-bottom: 25px;
    }

    .search-box input {
      width: 100%;
      padding: 12px 20px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 30px;
      font-size: 16px;
      transition: all 0.3s;
      background: rgba(255, 255, 255, 0.6);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .search-box input:focus {
      outline: none;
      border-color: #4fc3f7;
      box-shadow: 0 4px 15px rgba(79, 195, 247, 0.3);
    }

    .student-list {
      list-style: none;
    }

    .student-item {
      padding: 18px;
      margin-bottom: 15px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .student-item:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .student-item.active {
      background: rgba(79, 195, 247, 0.2);
      border: 1px solid #4fc3f7;
      box-shadow: 0 4px 15px rgba(79, 195, 247, 0.3);
    }

    .student-name {
      font-weight: bold;
      font-size: 18px;
      color: #0277bd;
      margin-bottom: 8px;
    }

    .student-id {
      color: #0288d1;
      font-size: 15px;
    }

    .detail-card {
      background: rgba(255, 255, 255, 0.7);
      border-radius: 20px;
      padding: 35px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(5px);
    }

    .detail-header {
      display: flex;
      align-items: center;
      margin-bottom: 35px;
      padding-bottom: 25px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    }

    .avatar {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 45px;
      color: white;
      margin-right: 25px;
      box-shadow: 0 8px 20px rgba(79, 195, 247, 0.3);
      border: 3px solid rgba(255, 255, 255, 0.8);
    }

    .detail-title h2 {
      color: #01579b;
      font-size: 32px;
      margin-bottom: 8px;
    }

    .detail-title p {
      color: #0288d1;
      font-size: 18px;
    }

    .detail-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
    }

    .info-item {
      padding: 20px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 15px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: all 0.3s;
    }

    .info-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

    .info-label {
      font-weight: bold;
      color: #01579b;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .info-value {
      color: #0277bd;
      font-size: 18px;
    }

    .empty-state {
      text-align: center;
      padding: 80px 20px;
      color: #4db6ac;
    }

    .empty-state svg {
      width: 120px;
      height: 120px;
      margin-bottom: 25px;
      opacity: 0.7;
    }

    .empty-state p {
      font-size: 20px;
      color: #0288d1;
    }

    @media (max-width: 768px) {
      .content {
        flex-direction: column;
      }

      .left-panel {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
      }

      .detail-info {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>学生信息管理系统</h1>
    <p>点击左侧学生姓名查看详细信息</p>
  </div>

  <div class="content">
    <div class="left-panel">
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="搜索学生姓名或学号...">
      </div>
      <ul class="student-list" id="studentList">
        <!-- 学生列表将通过JavaScript动态生成 -->
      </ul>
    </div>

    <div class="right-panel">
      <div id="studentDetail">
        <div class="empty-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 11l3 3L22 4"></path>
            <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
          </svg>
          <p>请选择左侧学生查看详细信息</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 模拟学生数据
  const students = [
    {
      id: '2021001',
      name: '张三',
      gender: '男',
      age: 20,
      major: '计算机科学与技术',
      grade: '大二',
      gpa: 3.8,
      phone: '13800138000',
      email: 'zhangsan@example.com',
      address: '北京市海淀区',
      enrollmentDate: '2021-09-01'
    },
    {
      id: '2021002',
      name: '李四',
      gender: '女',
      age: 19,
      major: '软件工程',
      grade: '大二',
      gpa: 3.9,
      phone: '13900139000',
      email: 'lisi@example.com',
      address: '上海市浦东新区',
      enrollmentDate: '2021-09-01'
    },
    {
      id: '2021003',
      name: '王五',
      gender: '男',
      age: 21,
      major: '电子信息工程',
      grade: '大三',
      gpa: 3.6,
      phone: '13700137000',
      email: 'wangwu@example.com',
      address: '广州市天河区',
      enrollmentDate: '2020-09-01'
    },
    {
      id: '2021004',
      name: '赵六',
      gender: '女',
      age: 18,
      major: '人工智能',
      grade: '大一',
      gpa: 4.0,
      phone: '13600136000',
      email: 'zhaoliu@example.com',
      address: '深圳市南山区',
      enrollmentDate: '2022-09-01'
    },
    {
      id: '2021005',
      name: '钱七',
      gender: '男',
      age: 22,
      major: '网络工程',
      grade: '大四',
      gpa: 3.5,
      phone: '13500135000',
      email: 'qianqi@example.com',
      address: '杭州市西湖区',
      enrollmentDate: '2019-09-01'
    }
  ];

  let currentStudent = null;

  // 初始化页面
  function init() {
    renderStudentList(students);
    setupSearch();
  }

  // 渲染学生列表
  function renderStudentList(studentList) {
    const listElement = document.getElementById('studentList');
    listElement.innerHTML = '';

    studentList.forEach((student, index) => {
      const li = document.createElement('li');
      li.className = 'student-item';
      li.innerHTML = `
                    <div class="student-name">${student.name}</div>
                    <div class="student-id">学号: ${student.id}</div>
                `;
      li.addEventListener('click', () => selectStudent(student, li));
      listElement.appendChild(li);
    });
  }

  // 选择学生
  function selectStudent(student, element) {
    // 移除之前的active状态
    document.querySelectorAll('.student-item').forEach(item => {
      item.classList.remove('active');
    });

    // 添加active状态
    element.classList.add('active');

    currentStudent = student;
    renderStudentDetail(student);
  }

  // 渲染学生详情
  function renderStudentDetail(student) {
    const detailElement = document.getElementById('studentDetail');
    detailElement.innerHTML = `
                <div class="detail-card">
                    <div class="detail-header">
                        <div class="avatar">${student.name.charAt(0)}</div>
                        <div class="detail-title">
                            <h2>${student.name}</h2>
                            <p>${student.major} - ${student.grade}</p>
                        </div>
                    </div>
                    <div class="detail-info">
                        <div class="info-item">
                            <div class="info-label">学号</div>
                            <div class="info-value">${student.id}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">性别</div>
                            <div class="info-value">${student.gender}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">年龄</div>
                            <div class="info-value">${student.age}岁</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">绩点</div>
                            <div class="info-value">${student.gpa}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">联系电话</div>
                            <div class="info-value">${student.phone}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">电子邮箱</div>
                            <div class="info-value">${student.email}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">家庭住址</div>
                            <div class="info-value">${student.address}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">入学时间</div>
                            <div class="info-value">${student.enrollmentDate}</div>
                        </div>
                    </div>
                </div>
            `;
  }

  // 设置搜索功能
  function setupSearch() {
    const searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('input', (e) => {
      const searchTerm = e.target.value.toLowerCase();
      const filteredStudents = students.filter(student =>
              student.name.toLowerCase().includes(searchTerm) ||
              student.id.includes(searchTerm)
      );
      renderStudentList(filteredStudents);
    });
  }

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>